<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">




    <title>数据 - AdminLTE2定制版</title>
    <meta name="description" content="AdminLTE2定制版">
    <meta name="keywords" content="AdminLTE2定制版">




    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <!-- Font Awesome -->
    <!-- Ionicons -->
    <!-- iCheck -->
    <!-- Morris chart -->
    <!-- jvectormap -->
    <!-- Date Picker -->
    <!-- Daterange picker -->
    <!-- Bootstrap time Picker -->
    <!--<link rel="stylesheet" href="../../../plugins/timepicker/bootstrap-timepicker.min.css">-->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--数据表格-->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- Bootstrap Color Picker -->
    <!-- bootstrap wysihtml5 - text editor -->
    <!--bootstrap-markdown-->
    <!-- Theme style -->
    <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
    <!-- Ion Slider -->
    <!-- ion slider Nice -->
    <!-- bootstrap slider -->
    <!-- bootstrap-datetimepicker -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->





    <!-- jQuery 2.2.3 -->
    <!-- jQuery UI 1.11.4 -->
    <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
    <!-- Bootstrap 3.3.6 -->
    <!-- Morris.js charts -->
    <!-- Sparkline -->
    <!-- jvectormap -->
    <!-- jQuery Knob Chart -->
    <!-- daterangepicker -->
    <!-- datepicker -->
    <!-- Bootstrap WYSIHTML5 -->
    <!-- Slimscroll -->
    <!-- FastClick -->
    <!-- iCheck -->
    <!-- AdminLTE App -->
    <!-- 表格树 -->
    <!-- select2 -->
    <!-- bootstrap color picker -->
    <!-- bootstrap time picker -->
    <!--<script src="../../../plugins/timepicker/bootstrap-timepicker.min.js"></script>-->
    <!-- Bootstrap WYSIHTML5 -->
    <!--bootstrap-markdown-->
    <!-- CK Editor -->
    <!-- InputMask -->
    <!-- DataTables -->
    <!-- ChartJS 1.0.1 -->
    <!-- FLOT CHARTS -->
    <!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
    <!-- FLOT PIE PLUGIN - also used to draw donut charts -->
    <!-- FLOT CATEGORIES PLUGIN - Used to draw bar charts -->
    <!-- jQuery Knob -->
    <!-- Sparkline -->
    <!-- Morris.js charts -->
    <!-- Ion Slider -->
    <!-- Bootstrap slider -->
    <!-- bootstrap-datetimepicker -->
    <!-- 页面meta /-->

    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/morris/morris.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/select2/select2.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

    <div class="wrapper">

        <!-- 页面头部 -->
        <jsp:include page="header.jsp"></jsp:include>
        <!-- 页面头部 /-->
        <!-- 导航侧栏 -->
        <jsp:include page="aside.jsp"></jsp:include>

        <!-- 导航侧栏 /-->

        <!-- 内容区域 -->
        <div class="content-wrapper">

            <!-- 内容头部 -->
            <section class="content-header">
                <h1>
                    学生成绩信息
                </h1>
                <ol class="breadcrumb">
                    <li><a href="${pageContext.request.contextPath}/index.jsp"><i
                            class="fa fa-dashboard"></i> 首页</a></li>
                    <li><a
                            href="${pageContext.request.contextPath}/classes/findByUser">我的班级</a></li>

                    <li class="active">学生考试信息展示</li>
                </ol>
            </section>
            <!-- 内容头部 /-->

            <!-- 正文区域 -->
            <section class="content">

                <!-- .box-body -->
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title">列表</h3>
                    </div>

                    <div class="box-body">

                        <!-- 数据表格 -->
                        <div class="table-box">
                            <!--工具栏-->
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();">
                                            <i class="fa fa-refresh"></i> 刷新</button>
                                    </div>
                                </div>
                            </div>
                            <!--工具栏/-->

                            <div class="box-tools pull-right">
                                <div class="has-feedback">
                                    <form class="form-inline" action="${pageContext.request.contextPath}/class_test/findById" method="get">
                                        <security:csrfInput/>
                                        <div class="form-group">
                                            <input type="hidden" name="cid" value="${cid}" class="form-control">
                                            <input type="text" name="name" value="${name}" class="form-control" id="exampleInputName2" placeholder="请输入学生姓名">

                                        </div>
                                        <button type="submit" class="btn btn-default">查询</button>
                                    </form>
                                </div>
                            </div>

                            <!--数据列表-->
                            <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
                                <thead>
                                    <tr>
                                        <th class="sorting_asc">学生姓名</th>
                                        <th class="sorting_asc">考试阶段</th>
                                        <th class="sorting">考试日期</th>
                                        <th class="">考试成绩</th>
                                        <th class="">补考成绩</th>
                                        <th class="">是否参加考试</th>
                                        <th class="">是否及格</th>
                                        <th class="" style="text-align: center">操作</th>
                                    </tr>
                                </thead>
                                <tbody>

                                <c:forEach items="${stuTestPageInfo.list}" var="stu">
                                    <input type="hidden" name="id" value="${stu.id}">
                                    <input type="hidden" name="cid" value="${stu.cid}">
                                    <tr>
                                        <td>${stu.student.name}</td>
                                        <td>${stu.stage}</td>
                                        <td>${stu.testDate}</td>
                                        <td class="update-td" val="${stu.result}" >${stu.result}</td>
                                        <td class="update-td" val="${stu.makeUp}">${stu.makeUp}</td>
                                        <td class="update-td" val="${stu.pass}">${stu.pass==1?"已参加":"未參加"}</td>
                                        <td class="update-td" val="${stu.partake}">${stu.partake==1?"及格":"不及格"}</td>
                                        <td class="text-center">
                                            <button class="btn bg-olive btn-xs update-btn" stuId="${stu.id}" >修改</button>
                                        </td>
                                    </tr>
                                </c:forEach>

                                </tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.box-body -->

                    <!-- .box-footer-->
                    <%--分页--%>
                    <div class="box-footer">
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                总共<span style="color: red">${stuTestPageInfo.pages}</span>页，共<span style="color: red">${stuTestPageInfo.total}</span> 条数据。 每页
                                <select class="form-control" id="sel">
                                    <option <c:if test="${stuTestPageInfo.pageSize==10}">selected </c:if>>10</option>
                                    <option <c:if test="${stuTestPageInfo.pageSize==15}">selected </c:if>>15</option>
                                    <option <c:if test="${stuTestPageInfo.pageSize==20}">selected </c:if>>20</option>
                                    <option <c:if test="${stuTestPageInfo.pageSize==50}">selected </c:if>>50</option>
                                </select> 条
                            </div>
                        </div>


                        <div class="box-tools pull-right">
                            <ul class="pagination">
                                <li>
                                    <a href="${pageContext.request.contextPath}/class_test/findById?cid=${cid}&name=${name}&pageNum=1&pageSize=10" aria-label="Previous">首页</a>
                                </li>


                                <c:if test="${stuTestPageInfo.pageNum == 1}">
                                    <li class="disabled">
                                </c:if>

                                <c:if test="${stuTestPageInfo.pageNum != 1}">
                                    <li>
                                </c:if>
                                    <a href="${pageContext.request.contextPath}/class_test/findById?cid=${cid}&name=${name}&pageNum=${stuTestPageInfo.pageNum - 1}&pageSize=10">上一页</a>
                                </li>


                                <c:forEach begin="1" end="${stuTestPageInfo.pages}" var="i">

                                    <c:if test="${stuTestPageInfo.pageNum == i}">
                                        <li class="active"><a href="${pageContext.request.contextPath}/class_test/findById?cid=${cid}&name=${name}&pageNum=${i}&pageSize=10">${i}</a></li>
                                    </c:if>

                                    <c:if test="${stuTestPageInfo.pageNum != i}">
                                        <li><a href="${pageContext.request.contextPath}/class_test/findById?cid=${cid}&name=${name}&pageNum=${i}&pageSize=10">${i}</a></li>
                                    </c:if>

                                </c:forEach>

                                <c:if test="${stuTestPageInfo.pageNum == stuTestPageInfo.pages}">
                                    <li class="disabled">
                                </c:if>

                                <c:if test="${stuTestPageInfo.pageNum != stuTestPageInfo.pages}">
                                    <li>
                                </c:if>
                                    <a href="${pageContext.request.contextPath}/class_test/findById?cid=${cid}&name=${name}&pageNum=${stuTestPageInfo.pageNum + 1}&pageSize=10">下一页</a>
                                </li>

                                <li>
                                    <a href="${pageContext.request.contextPath}/class_test/findById?cid=${cid}&name=${name}&pageNum=${stuTestPageInfo.pages}&pageSize=10" aria-label="Next">尾页</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                    <!-- /.box-footer-->


                </div>

            </section>
            <!-- 正文区域 /-->

        </div>
        <!-- 内容区域 /-->

        <!-- 底部导航 -->
        <footer class="main-footer">
            <div class="pull-right hidden-xs">
                <b>Version</b> 1.0.8
            </div>
            <strong>Copyright &copy; 2014-2017 <a href="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved.
        </footer>
        <!-- 底部导航 /-->


    </div>


    <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
    <script>
        $.widget.bridge('uibutton', $.ui.button);
    </script>
    <script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
    <script src="../plugins/raphael/raphael-min.js"></script>
    <script src="../plugins/morris/morris.min.js"></script>
    <script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
    <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
    <script src="../plugins/knob/jquery.knob.js"></script>
    <script src="../plugins/daterangepicker/moment.min.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.js"></script>
    <script src="../plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
    <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
    <script src="../plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
    <script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
    <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
    <script src="../plugins/fastclick/fastclick.js"></script>
    <script src="../plugins/iCheck/icheck.min.js"></script>
    <script src="../plugins/adminLTE/js/app.min.js"></script>
    <script src="../plugins/treeTable/jquery.treetable.js"></script>
    <script src="../plugins/select2/select2.full.min.js"></script>
    <script src="../plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="../plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
    <script src="../plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
    <script src="../plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
    <script src="../plugins/bootstrap-markdown/js/markdown.js"></script>
    <script src="../plugins/bootstrap-markdown/js/to-markdown.js"></script>
    <script src="../plugins/ckeditor/ckeditor.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
    <script src="../plugins/input-mask/jquery.inputmask.extensions.js"></script>
    <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
    <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
    <script src="../plugins/chartjs/Chart.min.js"></script>
    <script src="../plugins/flot/jquery.flot.min.js"></script>
    <script src="../plugins/flot/jquery.flot.resize.min.js"></script>
    <script src="../plugins/flot/jquery.flot.pie.min.js"></script>
    <script src="../plugins/flot/jquery.flot.categories.min.js"></script>
    <script src="../plugins/ionslider/ion.rangeSlider.min.js"></script>
    <script src="../plugins/bootstrap-slider/bootstrap-slider.js"></script>
    <script src="../plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.js"></script>
    <script src="../plugins/bootstrap-datetimepicker/locales/bootstrap-datetimepicker.zh-CN.js"></script>


    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/fy-alert/css/alert.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/fy-alert/css/fy-alert.css"/>
    <script src="${pageContext.request.contextPath}/plugins/fy-alert/js/fy-alert.js"></script>
    <script>
        $(document).ready(function() {
            // 选择框
            $(".select2").select2();

            // WYSIHTML5编辑器
            $(".textarea").wysihtml5({
                locale: 'zh-CN'
            });
        });


        // 设置激活菜单
        function setSidebarActive(tagUri) {
            var liObj = $("#" + tagUri);
            if (liObj.length > 0) {
                liObj.parent().parent().addClass("active");
                liObj.addClass("active");
            }
        }

        //删除确认
        function deleteById(id) {
            var bool = confirm("确认删除?");
            if(bool){
                location.href="${pageContext.request.contextPath}/stuTest/delete?id="+id;
            }
        }

        window.onload = function () {
            var msg = "${msg}";
            if(msg != null && msg.length>0){
                alert(msg);
                ${sessionScope.remove("msg")}
            }
        }

        $(document).ready(function() {

            // 激活导航位置
            setSidebarActive("travellog-manage");

            // 列表按钮 
            $("#dataList td input[type='checkbox']").iCheck({
                checkboxClass: 'icheckbox_square-blue',
                increaseArea: '20%'
            });
            // 全选操作 
            $("#selall").click(function() {
                var clicks = $(this).is(':checked');
                if (!clicks) {
                    $("#dataList td input[type='checkbox']").iCheck("uncheck");
                } else {
                    $("#dataList td input[type='checkbox']").iCheck("check");
                }
                $(this).data("clicks", !clicks);
            });
        });


         $(function () {
             //为4个td绑定事件
             $('tr>td.update-td').click(function () {
                 var td_btn = $(this);
                 var td_index = td_btn.index();
                 var alert_name = $("table").find('tr > th').eq(td_index).text();
                 var content=alert_name+ ": <input id='stu_info' type='text' value='"+td_btn.text()+"' /></br>"
                 if(td_index == 5 ){
                     content =alert_name+ "<select id ='stu_info'>"+
                         "<option value='1'>已參加</option>"+
                         "<option value='0'>未參加</option>"+
                         "</select>";
                 }else if(td_index == 6){
                      content =alert_name+ "<select id ='stu_info'>"+
                         "<option value='1'>及格</option>"+
                         " <option value='0'>不及格</option>"+
                         "</select>";
                 }


                 fyAlert.alert({
                     title   : "修改信息",
                     closeBtn : false,
                     skin     : 'fyAlert-blue',
                     content  :  content,
                     btns: {
                         '确认': function (obj) {
                             if(td_index <= 4){
                                 var score =  $('#stu_info').val();
                                 var numRegx = /^([1-9][0-9]*)+(.[0-9]{1,2})?$/;
                                 if(numRegx.test(score) == true && score >=0 && score<=100){
                                     td_btn.text(score);
                                     td_btn.attr("val",$('#stu_info').val());
                                 }else {
                                     fyAlert.msg("请输入合法数字",{icon:3,animateType:3});
                                 }

                             }else {
                                 td_btn.text($('#stu_info option:selected').text());
                                 td_btn.attr("val",$('#stu_info option:selected').val());
                             }

                             td_btn.css({'color':'#28FF28'});
                             obj.destory();
                         },
                         '关闭': function (obj) {
                             obj.destory();
                         }
                     },
                     success:function (obj) {
                         $(this).mouseleave(function () {
                             obj.destory();
                         })
                     }
                 });


             });

             //更新按钮点击就会提交更新
           $('.update-btn').click(function () {
               var stuId = Number($(this).attr('stuId'));
               var stuTest = new Array(4);
               var count = 0 ;
               $(this).parent().siblings('td.update-td').each(function (index,element) {
                   stuTest[count] = $(element).attr('val');
                   count++;
               });
               var stuJson = {'id':stuId,'result':stuTest[0],'makeUp':stuTest[1],'pass':stuTest[2],'partake':stuTest[3]};
             /*  alert(JSON.stringify(stuJson));*/

               $.ajax({
                   url:'/class_test/modifyByStuTest',
                   type:'get',
                   dataType:'json',  //返回数据类型 如果后端返回一个消息对象 这里为json
                   data: stuJson,
                   success: function (data) {
                       if(data == "1"){
                           fyAlert.msg("修改成功",{icon:1,animateType:1});
                       }else {
                           fyAlert.msg("修改失败",{icon:3,animateType:3});


                       }
                   }

               });
           });
         });





    </script>
</body>

</html>